.el-alert {
    --el-alert-padding: 8px 16px;
    --el-alert-border-radius-base: var(--el-border-radius-base);
    --el-alert-title-font-size: 14px;
    --el-alert-title-with-description-font-size: 16px;
    --el-alert-description-font-size: 14px;
    --el-alert-close-font-size: 16px;
    --el-alert-close-customed-font-size: 14px;
    --el-alert-icon-size: 16px;
    --el-alert-icon-large-size: 28px;
    align-items: center;
    background-color: var(--el-color-white);
    border-radius: var(--el-alert-border-radius-base);
    box-sizing: border-box;
    display: flex;
    margin: 0;
    opacity: 1;
    overflow: hidden;
    padding: var(--el-alert-padding);
    position: relative;
    transition: opacity var(--el-transition-duration-fast);
    width: 100%
}

.el-alert.is-light .el-alert__close-btn {
    color: var(--el-text-color-placeholder)
}

.el-alert.is-dark .el-alert__close-btn,
.el-alert.is-dark .el-alert__description {
    color: var(--el-color-white)
}

.el-alert.is-center {
    justify-content: center
}

.el-alert--primary {
    --el-alert-bg-color: var(--el-color-primary-light-9)
}

.el-alert--primary.is-light {
    background-color: var(--el-alert-bg-color)
}

.el-alert--primary.is-light,
.el-alert--primary.is-light .el-alert__description {
    color: var(--el-color-primary)
}

.el-alert--primary.is-dark {
    background-color: var(--el-color-primary);
    color: var(--el-color-white)
}

.el-alert--success {
    --el-alert-bg-color: var(--el-color-success-light-9)
}

.el-alert--success.is-light {
    background-color: var(--el-alert-bg-color)
}

.el-alert--success.is-light,
.el-alert--success.is-light .el-alert__description {
    color: var(--el-color-success)
}

.el-alert--success.is-dark {
    background-color: var(--el-color-success);
    color: var(--el-color-white)
}

.el-alert--info {
    --el-alert-bg-color: var(--el-color-info-light-9)
}

.el-alert--info.is-light {
    background-color: var(--el-alert-bg-color)
}

.el-alert--info.is-light,
.el-alert--info.is-light .el-alert__description {
    color: var(--el-color-info)
}

.el-alert--info.is-dark {
    background-color: var(--el-color-info);
    color: var(--el-color-white)
}

.el-alert--warning {
    --el-alert-bg-color: var(--el-color-warning-light-9)
}

.el-alert--warning.is-light {
    background-color: var(--el-alert-bg-color)
}

.el-alert--warning.is-light,
.el-alert--warning.is-light .el-alert__description {
    color: var(--el-color-warning)
}

.el-alert--warning.is-dark {
    background-color: var(--el-color-warning);
    color: var(--el-color-white)
}

.el-alert--error {
    --el-alert-bg-color: var(--el-color-error-light-9)
}

.el-alert--error.is-light {
    background-color: var(--el-alert-bg-color)
}

.el-alert--error.is-light,
.el-alert--error.is-light .el-alert__description {
    color: var(--el-color-error)
}

.el-alert--error.is-dark {
    background-color: var(--el-color-error);
    color: var(--el-color-white)
}

.el-alert__content {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.el-alert .el-alert__icon {
    font-size: var(--el-alert-icon-size);
    margin-right: 8px;
    width: var(--el-alert-icon-size)
}

.el-alert .el-alert__icon.is-big {
    font-size: var(--el-alert-icon-large-size);
    margin-right: 12px;
    width: var(--el-alert-icon-large-size)
}

.el-alert__title {
    font-size: var(--el-alert-title-font-size);
    line-height: 24px
}

.el-alert__title.with-description {
    font-size: var(--el-alert-title-with-description-font-size)
}

.el-alert .el-alert__description {
    font-size: var(--el-alert-description-font-size);
    margin: 0
}

.el-alert .el-alert__close-btn {
    cursor: pointer;
    font-size: var(--el-alert-close-font-size);
    opacity: 1;
    position: absolute;
    right: 16px;
    top: 12px
}

.el-alert .el-alert__close-btn.is-customed {
    font-size: var(--el-alert-close-customed-font-size);
    font-style: normal;
    line-height: 24px;
    top: 8px
}

.el-alert-fade-enter-from,
.el-alert-fade-leave-active {
    opacity: 0
}